<template>
  <div class="edit-objective-content">
    <el-form label-position="top" :model="form" :rules="rules" v-loading="formLoading" ref="form">
      <el-row :gutter="100">
        <el-col :span="12">
          <el-form-item label="期望职位" prop="post">
            <div class="info-box">
              <el-cascader v-model="form.post" :options="category" :props="optionProps" filterable :show-all-levels="false" v-loading="categoryLoading"></el-cascader>
            </div>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="期望地点" prop="regArea">
            <el-cascader filterable clearable v-model="form.regArea" :options="areaData"></el-cascader>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="期望薪资" prop="salaryMin">
            <el-col :span="6">
                <el-select v-model="form.salaryMin" placeholder="请选择最低薪资">
                  <el-option v-for="(item,index) in salaryStart" :key="index" :label="item+'元'" :value="item">
                  </el-option>
                </el-select>
            </el-col>
            <el-col style="text-align: center" :span="1">-</el-col>
            <el-col :span="6">
                <el-select v-model="form.salaryMax" placeholder="请选择最高薪资">
                  <el-option v-for="(item,index) in salaryEnd" :key="index" :label="item+'元'" :value="item">
                  </el-option>
                </el-select>
            </el-col>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="职位类型" prop="recruitType">
            <el-select v-model="form.recruitType" placeholder="请选择职位类型">
              <el-option v-for="(item) in [{id:1,value:'全职'},{id:2,value:'兼职'}]" :key="item.id" :label="item.value" :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
import {getSalaryData} from '@/utils/utils'
import {getJobCategory as getJobCategoryApi} from '@/api/config'
import {submitIntention,getIntention} from '@/api/mineCenter'
export default {
  name: "Objective",
  emits:['refresh'],
  data() {
    return {
      //期望职位选择项配置
      categoryLoading:false,
      category: [],
      //期望职位级联选择器配置
      optionProps: {
        value: 'id',
        label: 'jobTitle',
        children: 'subLevelModelList',
      },
      //期望地点选择项配置
      areaData: [],
      //工资配置
      salaryStart: [],
      salaryEnd: [],
      formLoading:false,
      form: {
        id:0,
        salaryMin:null,
        salaryMax:null,
        post:null,
        regArea:null,
        recruitType:1,
      },
      rules: {
        post: [
          {required: true, message: '请选择岗位', trigger: 'blur'}
        ],
        salaryMin: [
          {required: true, message: '请选择薪资', trigger: 'blur'}
        ],
        regArea: [
          {required: true, message: '请选择地点', trigger: 'blur'}
        ]
      }
    }
  },
  watch:{
    "form.salaryMin":function (newVal){
      this.getSalary(newVal/1000)
      if(!this.salaryEnd.includes(this.form.salaryMax)){
        this.form.salaryMax=this.salaryEnd[0]
      }
    }
  },
  methods: {
    submit() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          if(this.formLoading){
            this.$message.warning('请等待加载完成');
            return;
          }
          let form=JSON.parse(JSON.stringify(this.form));
          if(typeof form.post==='object'){
            form.post=form.post[2];
          }
          if(typeof form.regArea==='object'){
            form.regArea=form.regArea.join(',');
          }
          if(!form.salaryMax){
            this.$message.error('请选择最高薪资');
            return;
          }
          const loading=this.$loading({text:'提交中'});
          submitIntention(form).then(()=>{
            this.$message.success('提交成功');
            this.$emit('refresh',1)
          }).finally(()=>{
            loading.close()
          })
        }
      })
    },
    //获取工资选项
    getSalary(select){
      const data=getSalaryData(select);
      this.salaryStart=data[0];
      this.salaryEnd=data[1];
    },
    //获取职位类别
    getJobCategory(){
      this.categoryLoading=true
      getJobCategoryApi({}).then((res)=>{
        this.category=res;
      }).finally(()=>{
        this.categoryLoading=false
      })
    },
    //获取详情
    getDetail(id){
      this.formLoading=true;
      getIntention({id}).then((res)=>{
        res.regArea=res.regArea?.split(',');
        this.form=res;
      }).catch(()=>{
        this.$emit('refresh',1);
      }).finally(()=>{
        this.formLoading=false;
      })
    }
  },
  mounted() {
    this.areaData = this.appConfig.area;
    this.getSalary(0);
    this.getJobCategory()
  }
}
</script>

<style lang="scss" scoped>
.edit-objective-content {
  padding: 0 60px;

  .el-date-editor, .el-select {
    width: 100%;
  }

  .el-form-item__content {
    position: relative;
  }

  .iconfont {
    color: $darkGray;
    font-size: 18px;
    font-weight: bold;
    position: absolute;
    width: 30px;
    transform: translate(-50%, -50%);
    top: 50%;
    right: -15px;
    cursor: pointer;
  }
}
</style>
